/*
 * @Description: 库管理功能按钮
 * @Author: Zzt
 * @Date: 2022-10-27 15:36:18
 * @LastEditTime: 2022-11-08 10:59:38
 */

import { Button, Space } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import cs from 'classnames';
import { useReportTemplateContext } from '../contexts/ReportTemplateContext';
import AddReport from './dialogs/AddReport';

const PageOperate = () => {
  const { selectLevel, selectItems, delReportTemplateFunc } = useReportTemplateContext();

  // 新建模板弹窗
  const [addReportVisible, setAddReportVisible] = useState(false);

  useEffect(() => {
    console.log('operate setSelectLevel', selectLevel);
  }, [selectLevel]);

  const delTemplate = () => {
    delReportTemplateFunc(selectItems);
  };

  const addTemplate = () => {
    setAddReportVisible(true);
  };

  return (
    <>
      <div className={cs('filter-container', 'page-operate')}>
        <div>{selectLevel?.levelName}-报表模板列表</div>
        <Space size="small">
          <Button
            disabled={selectLevel.level < 0}
            onClick={() => {
              addTemplate();
            }}
          >
            新建
          </Button>
          <Button
            disabled={selectItems.length <= 0}
            onClick={() => {
              delTemplate();
            }}
          >
            删除
          </Button>
        </Space>
      </div>

      {useMemo(
        () => (
          <AddReport
            visible={addReportVisible}
            onClose={() => {
              setAddReportVisible(false);
            }}
          />
        ),
        [addReportVisible]
      )}
    </>
  );
};
export default PageOperate;
